<template>
    <div class="app-system">
        <!-- 顶部 -->
        <system-header />
        <!-- 菜单 -->
        <system-menu />
        <!-- 主体 -->
        <div class="system-body" :class="{ 'is-menu-collapse': collapse }">
            <!-- 标签栏 -->
            <system-tags v-if="setting.showTags" />
            <!-- 视图 -->
            <div
                id="system-view"
                class="system-view"
                v-loading="isLoading"
                :element-loading-text="loadingText"
                element-loading-background="rgba(0, 0, 0, 0.2)"
            >
                <transition name="body-move">
                    <keep-alive :include="aliveTags">
                        <router-view class="view"></router-view>
                    </keep-alive>
                </transition>
                <!-- 返回顶部 -->
                <el-backtop target="#system-view">
                    <div class="el-backtop-inner">UP</div>
                </el-backtop>
            </div>
        </div>
        <!-- 右边setting侧栏 -->
        <system-setting />
    </div>
</template>

<script>
    import systemHeader from './header.vue'
    import systemMenu from './menu.vue'
    import systemTags from './tags.vue'
    import systemSetting from './setting.vue'
    export default {
        name: 'app-system',
        components: {
            systemHeader,
            systemMenu,
            systemTags,
            systemSetting
        },
        provide () {
            return {
                closePage: this.closePage
            }
        },
        data () {
            return {}
        },
        computed: {
            collapse () {
                return this.$store.state.common.collapse
            },
            setting () {
                return this.$store.state.common.setting
            },
            aliveTags () {
                const tagsList = this.$store.state.common.tagsList
                const tagsNameArray = []
                for (let i = 0, len = tagsList.length; i < len; i++) {
                    tagsList[i].name && tagsNameArray.push(tagsList[i].name)
                }
                return tagsNameArray
            },
            isLoading () {
                return this.$store.state.common.isLoading
            },
            loadingText () {
                return this.$store.state.common.loadingText
            }
        },
        beforeCreate () {
            let setting = localStorage.getItem('setting')
            if (setting) {
                try {
                    setting = JSON.parse(setting)
                    const storeSetting = this.$store.state.common.setting
                    if (Object.keys(storeSetting).length !== Object.keys(setting).length) {
                        setting = null
                    }
                } catch (err) {
                    setting = null
                }
            }

            if (!setting) {
                setting = {
                    // 显示顶部菜单栏
                    showTopNav: true,
                    // 默认是否显示标签栏
                    showTags: true,
                    // 菜单栏默认是否折叠
                    collapse: 'auto'
                }
            }
            this.$store.commit('SET_SETTING', setting)
        },
        created () {
            // 菜单栏是否折叠
            if (this.setting.collapse === 'auto') {
                this.$store.commit('SET_COLLAPSE', document.body.clientWidth < 1500)
            } else {
                this.$store.commit('SET_COLLAPSE', this.setting.collapse)
            }

            // 获取用户信息及菜单，实际在main.js中router.beforeEach完成
            this.getDefaultData()
        },
        mounted () {
            // 键盘关闭标签事件
            document.addEventListener('keydown', this.keydownFn)
        },
        beforeDestroy () {
            document.removeEventListener('keydown', this.keydownFn)
        },
        methods: {
            getDefaultData () {
                // 用户信息
                this.$store.commit('SET_USER_INFO', {
                    birth: '2020-02-02',
                    lastLoginAt: '2024-03-06 17:12:27',
                    createdAt: '2024-03-05 17:23:23',
                    updatedAt: '2024-03-06 17:12:27',
                    deletedAt: null,
                    id: '7a19c6f5-0f3b-41de-9026-f8affc9feda0',
                    username: 'admin',
                    nickname: '管理员',
                    level: '2',
                    status: '1',
                    phone: '13333333333',
                    email: 'admin@xxxx.com',
                    avatar: null,
                    gender: '1',
                    motto: '草长莺飞二月天，拂堤杨柳醉春烟。'
                })
                // 菜单列表
                this.$store.commit('SET_ROUTER_LIST', [
                    // isMenu: false 表示不显示到菜单
                    // pid 是示父级菜单项id
                    { id: '2bd57d1f-f6af', path: '/dashboard', text: '控制台', isMenu: '1', icon: 'el-icon-house', pid: '' },
                    { id: '1f737bc5-230a', path: '/user/info', text: '用户资料', isMenu: '0', icon: '', pid: '' },
                    { id: '8898186f-0223', path: '/user/password', text: '修改密码', isMenu: '0', icon: '', pid: '' },
                    // 作为文件夹 不给path赋唯一值会导致点击会同时打开多个文件夹
                    { id: '60c6502c-6f5b', path: '/level1', text: '一级菜单', isMenu: '1', icon: 'el-icon-folder', pid: '' },
                    { id: 'f78bb594-8598', path: '/level2', text: '二级菜单', isMenu: '1', icon: 'el-icon-folder', pid: '60c6502c-6f5b' },
                    { id: '2237f2b6-4fc6', path: '/demo', text: '三级菜单', isMenu: '1', icon: 'el-icon-collection-tag', pid: 'f78bb594-8598' }
                ])
            },
            keydownFn (event) {
                if (event.altKey && event.keyCode === 87) {
                    this.closePage()
                }
            },
            // path: 要关闭的页面路径, next: 关闭后要跳转的页面路径
            // 不传path，默认关闭当前页
            closePage (path, next) {
                path = path || this.$route.path
                const tagsList = this.$store.state.common.tagsList
                // 移除当前项
                const currentIndex = tagsList.findIndex(v => v.path === path)
                if (currentIndex > -1) {
                    tagsList.splice(currentIndex, 1)
                    this.$store.commit('SET_TAGSLIST', tagsList)
                }

                // 指定跳转
                if (next) {
                    if (typeof nextPath === 'number') {
                        this.$router.go(next)
                    } else {
                        this.$router.push(next)
                    }
                    return
                }

                // 跳转相邻项
                const nextTag = tagsList[currentIndex] ? tagsList[currentIndex] : tagsList[currentIndex - 1]
                if (nextTag) {
                    this.$router.push(nextTag.fullPath)
                } else {
                    this.$router.push('/')
                }
            }
        }
    }
</script>

<style lang="scss">
.app-system {
    position: relative;
    min-width: 1200px;
    width: 100%;
    height: 100%;
    background-color: #d5d5d5;
    box-shadow: inset 0 0 100px 0 rgba(252, 232, 255, 0.5);

    .system-body {
        position: absolute;
        left: 250px;
        right: 20px;
        top: 70px;
        bottom: 20px;
        transition: left 0.3s ease-in-out;
        display: flex;
        flex-direction: column;

        &.is-menu-collapse {
            left: 65px;
        }

        .system-view {
            flex: 1;
            overflow-y: auto;
            background: #f7f7f7;
            box-shadow: 0 0 100px 0 rgba(224, 251, 248, 0.5);
            border-radius: 20px;

            .view {
                padding: 20px;
                position: relative;
            }

            .body-move-enter-active {
                opacity: 1;
                transform: translateX(0);
                transition: all 0.5s ease-in-out;
            }

            .body-move-enter {
                opacity: 0;
                transform: translateX(-50px);
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }
        }

        .el-backtop-inner {
            height: 100%;
            width: 100%;
            border-radius: 50%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #409EFF;
        }
    }
}
</style>
